<template>
   <div>
     <el-page-header  @back="$router.push('/drivermanagement')" content="车辆详情" class="huidan" style="margin-bottom:20px"></el-page-header>
      <el-card style="height:500px;">
        <template #default="{row}">
            <el-tabs v-model="activeName" @tab-click="handleClick(row)">
    <el-tab-pane label="基本信息" name="first">
 <el-row type="flex" justify="space-around" style="font-size: 14px;" >
      <el-col class="infos">车辆编号：{{form.id}}</el-col>
      <el-col>车辆号牌：{{form.licensePlate}}</el-col>
      <el-col>车型名称：{{form.truckTypeName}}</el-col>
    </el-row>
    <el-row type="flex" justify="space-around" style="font-size: 14px;margin-top:15px;">
      <el-col>车辆体积:{{form.allowableVolume}}</el-col>
      <el-col>车辆载重：{{form.allowableLoad}}吨</el-col>
      <el-col>GPSID: {{form.deviceGpsId}}</el-col>
    </el-row>
    <el-row style="font-size: 14px;margin-top:12px;" type="flex">
      图片信息
  <img src="https://yjy-slwl-oss.oss-cn-hangzhou.aliyuncs.com/6703d31c-bc41-4493-9057-f1709a391473.png" style="width: 212px;
    height: 159px;
    border: 1px solid rgb(216, 221, 227);
    border-radius: 4px;
    margin-right: 20px;
    margin-left:40px;">
  <img src="https://yjy-slwl-oss.oss-cn-hangzhou.aliyuncs.com/2d75f166-50c3-42f0-b0f5-1df8f65fc1c7.png" style="width: 212px;
    height: 159px;
    border: 1px solid rgb(216, 221, 227);
    border-radius: 4px;
    margin-right: 20px;">
    </el-row>
    </el-tab-pane>

    <!--  -->
    <el-tab-pane label="行驶证信息" name="second">
      <el-row type="flex" justify="space-around" style="margin-bottom:20px;font-size: 14px;">
        <el-col>行驶证号码：{{cart.transportCertificateNumber}}</el-col>
        <el-col>发动机号码：{{cart.engineNumber}}</el-col>
        <el-col>注册时间：{{cart.registrationDate}}</el-col>
      </el-row>
 <el-row type="flex" justify="space-around" style="margin-bottom:20px;font-size: 14px;">
        <el-col>强制报废日期：{{cart.mandatoryScrap}}</el-col>
        <el-col>整备质量：{{cart.overallQuality}}吨</el-col>
        <el-col>检测有效期：{{cart.expirationDate}}</el-col>
      </el-row>
       <el-row type="flex" justify="space-around" style="margin-bottom:20px;font-size: 14px;">
        <el-col>核定载质量：{{cart.allowableWeight}}吨</el-col>
        <el-col>有效期：{{cart.validityPeriod}}</el-col>
        <el-col></el-col>
      </el-row>
      <el-row style="margin-bottom:20px;font-size: 14px;">
        <el-col>图片信息</el-col>
      </el-row>

    </el-tab-pane>
  </el-tabs>
        </template>

      </el-card>
       <el-card>
   <el-row type="flex" justify="center">
      <el-button type="danger" class="btn" >编辑</el-button>
   </el-row>
   </el-card>
  </div>
</template>

<script>
import { getBindCart, getcarInfo } from '@/api/drivermanagement'
export default {
  name: 'driverCart',
  data () {
    return {
      imgUrl: '',
      cart: {},
      form: {},
      activeName: 'first',
      userId: this.$route.params.id // 拿到id
    }
  },
  methods: {
    handleClick (row) {
      // console.log(row)
    },
    // 获取车辆详情
    async getCartInfo () {
      const res = await getcarInfo(this.userId)
      // console.log(res)
      this.form = res.data
      const r = await getBindCart(this.userId)
      console.log(r)
      this.cart = r.data
      this.imgUrl = r.data.picture
      console.log(this.imgUrl)
    }
  },
  created () {
    this.getCartInfo()
    this.handleClick()
  }
}
</script>

<style lang="scss" scoped>
.btn {
  background-color: rgb(225, 85, 54);
    color: rgb(255, 255, 255);
    width: 110px;
    border-radius: 5px;
    font-weight: 400;
    border: 1px solid rgb(225, 85, 54)
}
</style>
